<!--分区域-->
<template>
  <div class="budgetDelivery-tab1">
    <div class="operation">
      <el-form :inline="true" :model="form" label-width="80px" class="formList">
        <el-form-item label="选择区域">
          <dx-cascader  :area_id.sync="form.areaId" />
        </el-form-item>
        <el-form-item label="年度">
          <el-date-picker v-model="form.year" value-format="yyyy" type="year" placeholder="选择年"></el-date-picker>
        </el-form-item>
        <el-form-item label="跟踪月份">
          <el-select v-model="form.trackingMonth" placeholder="请选择" @change="selectTrigger">
            <el-option  value="全年">全年</el-option>
            <el-option  value="上半年">上半年</el-option>
            <el-option  value="下半年">下半年</el-option>
            <el-option  value="自定义">自定义</el-option>
           </el-select>
        </el-form-item>
       <el-form-item   class="btnForm">
          <el-button size="small" type="primary" @click="submitHandle()">查询</el-button>
          <el-button size="small" type="orange" @click="allExportModal()">批量导出</el-button>
           <el-button size="small" type="orange" @click="exportModal()" class="export" >导出</el-button>
        </el-form-item>
        <el-form-item class="annual">
          <template>
            <el-checkbox-group v-model="checkList"  @change="checkedMonth">
               <el-checkbox v-for="(item,index) in form.checkedContent" :label="item.index" :key="index" >{{item.value}}</el-checkbox>
            </el-checkbox-group>
          </template>
        </el-form-item>
        <el-form-item class="annual">
          <template>
            <div class="title">筛选条件：</div>
            <div class="border">
              <div><span class="paddRig">跟踪指标：</span>
              <el-checkbox-group v-model="trackingArr"  @change="trackingClick">
                 <el-checkbox v-for="(item,index) in trackType"  :label="item" :key="index" >{{item.indexName}}</el-checkbox>
              </el-checkbox-group>
              </div>
              <div><span class="paddRig">跟踪维度：</span>
               <el-radio-group v-model="form.radio" @change='checedRadio'>
                  <el-radio :label="1">全部明细</el-radio>
                  <el-radio :label="2">只看进度</el-radio>
                </el-radio-group>
              </div>
            </div>
          </template>
        </el-form-item>

      </el-form>
    </div>

 <div v-show="form.radio==1">
 <div class="tableBox" v-for="(item,index) in tableAllData" :key="item.proType" v-if="tableDataObj['tableData'+index].length>0">
      <el-table
        v-loading="tableLoading"
        :data="tableDataObj['tableData'+index]"
        height="85vh"
        style="width: 100%"
        class="tableTh28"
        border
        stripe
        :ref="'tableData'+index"
      >
      <el-table-column :label="item.proType" prop="areaName" class-name="first-title" width="100" fixed></el-table-column>
      <el-table-column
        label="月度预算"
        class-name="third-title"
       width="120"
     >
          <el-table-column v-for="(item,index) in colDefList" :key="index" :label="item">
               <el-table-column width="100" label="目标值" :prop="'targetValue'+(index)"></el-table-column>
               <el-table-column width="100" label="实际完成" :prop="'actValue'+(index)"></el-table-column>
               <el-table-column label="完成进度(%)" :prop="'process'+(index)"></el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
       </div>
    <!-- 只看进度 -->
    <div v-show="form.radio==2">
    <div class="tableBox" v-for="(item1,index1) in tableAllData1" :key="item1.proType" v-if="tableDataObj1['tableData'+index1].length>0 && (trackingArr&&JSON.stringify(trackingArr).indexOf(item1.proType)>-1)">
         <el-table v-loading="tableLoading" :data="tableDataObj1['tableData'+index1]" style="width: 100%" class="tableTh28" border stripe :ref="'tableData'+index1">
         <el-table-column :label="item1.proType" prop="areaName" class-name="first-title" width="100" fixed></el-table-column>
         <el-table-column
           label="月度预算"
           prop="indexName"
           class-name="third-title"
          width="120"
        >
            <el-table-column v-for="(item,index) in colDefList1" :key="index" :label="item" :prop="'process'+(index)"> </el-table-column>
           </el-table-column>
         </el-table>
       </div>
          </div>
  </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import prefixAPI from "@/api/prefixAPI"
import { getSessionStorage } from "@/common/js/storage";
import {getCookie} from "@/common/js/cookie"
let accountInfo = JSON.parse(getSessionStorage('accountInfo'))
export default {
  name: "budgetDelivery-tab1",
  props:{
    areaList:{
      type:Array,
      default:()=>([])
    }
  },
  data() {
    return {
      form: {
        areaId: accountInfo.areaId,
        year: '',
        trackingMonth:'全年',
        dimension:1,
        radio:1,
        checkedContent:[
          {index:'01',value:'1月'},
          {index:'02',value:'2月'},
          {index:'03',value:'3月'},
          {index:'04',value:'4月'},
          {index:'05',value:'5月'},
          {index:'06',value:'6月'},
          {index:'07',value:'7月'},
          {index:'08',value:'8月'},
          {index:'09',value:'9月'},
          {index:'10',value:'10月'},
          {index:'11',value:'11月'},
          {index:'12',value:'12月'}
        ],

      },
      accountInfo: "",
        checkList: [],
        indexType:1,
        trackType:[],
        trackingList:[],
        trackingArr:[],
       checked:[],
       indexTypeStr:[],
       trackMonthStr:[],
       colDefList:[],
       colDefList1:[],
       tableData:[],
       tableData1:[],
       tableData2:[],
       tableData3:[],
       tableData4:[],
       tableData5:[],
       tableData6:[],
       tableData7:[],
       tableData8:[],
       tableData9:[],
       tableData10:[],
       tableData11:[],
       tableLoading: false,
       tableAllData:[],
       tableDataObj: {},
       tableAllData1:[],
       tableDataObj1: {},

    };
  },
  created() {
     this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
  },
 mounted(){
  this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
  this.getParams();
 },
  methods: {
  async getParams(){
        this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
        this.checkList = ['01','02','03','04','05','06','07','08','09','10','11','12']
        this.form.year = await this.getMaxMonthByTrackType();
        this.trackMonthStr=[]
       for(let item of this.checkList){
         this.trackMonthStr.push(this.form.year+item)
      }
       let trackType = await this.getTrackType();
       this.trackingArr = trackType
       this.submitHandle();
     },
    //获取时间数组对象
    checkedMonth(val){
      this.checkList = val;
       this.trackMonthStr=[]
       for(let item of this.checkList){
         this.trackMonthStr.push(this.form.year+item)
      }
      this.tableData=[];
      // this.submitHandle();
    },
    //获取指标数组对象
    trackingClick(val){
      // alert("1")
      // this.submitHandle();
    },
   // 下拉框事件
   selectTrigger(val){
     this.form.trackingMonth = val
     if(this.form.trackingMonth == '全年'){
        this.checkList = ['01','02','03','04','05','06','07','08','09','10','11','12']
        this.trackMonthStr=[]
      for(let item of this.checkList){
         this.trackMonthStr.push(this.form.year+item)
      }
        this.submitHandle();
     }if(this.form.trackingMonth == '上半年'){
       this.checkList = ['01','02','03','04','05','06']
       this.trackMonthStr=[]
       for(let item of this.checkList){
          this.trackMonthStr.push(this.form.year+item)
       }
         this.submitHandle();
     }if(this.form.trackingMonth == '下半年'){
       this.checkList = ['07','08','09','10','11','12']
       this.trackMonthStr=[]
       for(let item of this.checkList){
          this.trackMonthStr.push(this.form.year+item)
       }
         this.submitHandle();
     }if(this.form.trackingMonth == '自定义'){
       this.checkList = []
       this.trackMonthStr=[]
       for(let item of this.checkList){
          this.trackMonthStr.push(this.form.year+item)
       }
       this.submitHandle();
     }
   },
  //获取跟踪指标
   getTrackType(){
      var that = this
     return new Promise(resolve => {
      $budgetAPI.getTrackType(
      {indexType:this.indexType},
      res => {
       if (res && res.code == 0) {
          that.trackType = res.content;
          // that.indexTypeStr = res.content;
          resolve (res.content)
       }
     },
     err => {}
     )
      });
   },
   //获取年份
   getMaxMonthByTrackType(){
     var that = this
      return new Promise(resolve => {
      $budgetAPI.getMaxMonthByTrackType(
      {
        indexType:this.indexType,
        areaId : this.form.areaId ? this.form.areaId:this.accountInfo.areaId,
      },
      res => {
       if (res && res.code == 0) {
          that.form.year = res.content;
           resolve (res.content)
       }
     },
     err => {}
       );
       });
     },
    //获取跟踪维度
    checedRadio(val){
      this.form.radio = val
      this.submitHandle()
    },
    //点击查询
   async  submitHandle() {
       this.trackMonthStr=[]
       for(let item of this.checkList){
         this.trackMonthStr.push(this.form.year+item)
      }
      this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
      let params ={
        areaId : this.form.areaId ? this.form.areaId:this.accountInfo.areaId,
        testYear : this.form.year,
        indexTypeStr :JSON.stringify(this.trackingArr),
        trackMonthStr:JSON.stringify(this.trackMonthStr),
        indexType:1
      }
      this.getData(params);
    },
    getData(params) {

      if(this.form.radio == 1){
       this.tableLoading = true;
         var that=this
        $budgetAPI.getReleaseTrackData(params,res => {
            if (res.code === 0) {
              that.tableLoading = false
              that.colDefList = res.content.acctMonths
              that.tableAllData=res.content.data
              res.content.data.forEach((item,index)=>{
                that.$set(that.tableDataObj,'tableData'+index,item.dataList)
                that.tableDataObj['tableData'+index].map((item,index)=>{
                   item.dataList.map((ele, ind) => {
                        item['targetValue' + ind] = ele.targetValue
                        item['actValue' + ind] = ele.actValue
                        item['process' + ind] = ele.process
                      })
                })
              })
            } else {
              this.alertError(res);
            }
            setTimeout(()=>{
            for (let prop in that.tableDataObj) {
              that.$refs[prop] && that.$refs[prop][0] && that.$refs[prop][0].doLayout()
             }
            },500);
          });
      }else{
       this.tableLoading = true;
         var that=this
         $budgetAPI.getReleaseTrackData(params,res => {
            if (res.code === 0) {
              that.tableLoading = false
              that.colDefList1= res.content.acctMonths
              that.tableAllData1=res.content.data
              res.content.data.forEach((item,index)=>{
                that.$set(that.tableDataObj1,'tableData'+index,item.dataList)
                that.tableDataObj1['tableData'+index].map((item,index)=>{
                   item.dataList.map((ele, ind) => {
                        item['targetValue' + ind] = ele.targetValue
                        item['actValue' + ind] = ele.actValue
                        item['process' + ind] = ele.process
                      })
                })
              })
            } else {
              this.alertError(res);
            }
            setTimeout(()=>{
               for (let prop in that.tableDataObj1) {
                 that.$refs[prop] && that.$refs[prop][0] && that.$refs[prop][0].doLayout()
               }
            },500);
          });
      }
    },
    //导出
    exportModal() {
   let areaId = this.form.areaId;
        let testYear = this.form.year;
        let indexTypeStr1=[];
        this.trackingArr.map((item,index) =>{
          indexTypeStr1[index] = item.indexCode
        })
        let indexTypeStr= JSON.stringify(indexTypeStr1)
        let trackMonthStr =JSON.stringify(this.trackMonthStr);
        let indexType=1;
        let token = getCookie('token');
       if(this.form.radio == 1){
        let isShowDetail=true;
        // 根据不同模式切换不同的路径
        if (process.env.NODE_ENV == "development") {
          window.location.href =
            prefixAPI.loc +
            `/api/releaseTrack/exportReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&trackMonthStr=${trackMonthStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
        } else if (process.env.NODE_ENV == "production") {
          window.location.href =
            prefixAPI.hp +
             `/api/releaseTrack/exportReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&trackMonthStr=${trackMonthStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
        }
      }else{
        let isShowDetail=false;
        // 根据不同模式切换不同的路径
        if (process.env.NODE_ENV == "development") {
          window.location.href =
            prefixAPI.loc +
           `/api/releaseTrack/exportReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&trackMonthStr=${trackMonthStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
        } else if (process.env.NODE_ENV == "production") {
          window.location.href =
            prefixAPI.hp +
          `/api/releaseTrack/exportReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&trackMonthStr=${trackMonthStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
        }
      }
      },
  //批量导出
   allExportModal() {
  let areaId = this.form.areaId;
       let testYear = this.form.year;
       let indexTypeStr1=[];
       this.trackingArr.map((item,index) =>{
         indexTypeStr1[index] = item.indexCode
       })
       let indexTypeStr= JSON.stringify(indexTypeStr1)
       let trackMonthStr =JSON.stringify(this.trackMonthStr);
       let indexType=1;
       let token = getCookie('token');
      if(this.form.radio == 1){
       let isShowDetail=true;
       // 根据不同模式切换不同的路径
       if (process.env.NODE_ENV == "development") {
         window.location.href =
           prefixAPI.loc +
           `/api/releaseTrack/exportBatchReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&trackMonthStr=${trackMonthStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
       } else if (process.env.NODE_ENV == "production") {
         window.location.href =
           prefixAPI.hp +
            `/api/releaseTrack/exportBatchReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&trackMonthStr=${trackMonthStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
       }
     }else{
       let isShowDetail=false;
       // 根据不同模式切换不同的路径
       if (process.env.NODE_ENV == "development") {
         window.location.href =
           prefixAPI.loc +
          `/api/releaseTrack/exportBatchReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&trackMonthStr=${trackMonthStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
       } else if (process.env.NODE_ENV == "production") {
         window.location.href =
           prefixAPI.hp +
         `/api/releaseTrack/exportBatchReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&trackMonthStr=${trackMonthStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
       }
     }
     },
  }
};
</script>
<style lang="scss" scoped>
</style>
<style lang="scss">
.budgetDelivery-tab1 {
  .local {
    .cell {
      color: #000000;
      font-weight: 700;
    }
  }

  .operation {
    .annual {
       width: 100%;
       padding-left: 20px;
       .el-form-item__content{
         width: 100%;
       }
       .title{font-size: 18px;}
       .paddRig{
         padding-right: 25px;
        }
        .border{
          border: 1px solid #DCDFE6;
          padding: 0 20px;
          margin-bottom: 10px;
          .el-checkbox-group{
            display: inline-block;
          }
        }
  }
  .btnForm{
    float: right;
    .el-form-item__content{
      float: right;
      width: 100%;
      .export{
        float:right;
      }
    }
  }
 }
}
</style>
